<template>
  <div class="index">
    <div style="margin-bottom:50px;">
      <!-- 轮播 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in slideList" :key="index">
          <img
            style="width:100%"
            :src="item.image"
            @click="toImgUrl(item.clickUrl)"
            :alt="item.desc"
          />
        </van-swipe-item>
      </van-swipe>
      <!-- 宫格 -->
      <van-grid clickable>
        <van-grid-item v-for="(item, index) in gridList" :key="index" @click="toPage(item)">
          <van-image style="width:60%;margin-bottom:4px" :src="item.image" />
          <span style="font-size:14px">{{ item.desc }}</span>
        </van-grid-item>
      </van-grid>
      <!-- 通知 -->
      <van-cell icon="bullhorn-o" is-link @click="toNews">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        {{ newsList.mybiaoti }}
        <template #right-icon>
          <van-icon name="arrow" style="line-height: inherit;" />
        </template>
      </van-cell>
      <!-- 最新上架 -->
      <div class="goodsBox">
        <p class="goodsBoxTitle">
          最新上架
          <span @click="toGoodsList">更多<van-icon name="arrow"/></span>
        </p>
        <van-grid :column-num="2" clickable>
          <van-grid-item v-for="item in newGoods" :key="item.cp_id" @click="toGoodsDetails(item)">
            <van-image :src="item.cp_tupian" />
            <p class="goodsName">{{ item.cp_mingcheng }}</p>
            <p class="goodsPrice">￥{{ item.jiage }}</p>
          </van-grid-item>
        </van-grid>
        <!-- 空 提示 -->
        <van-empty v-if="newGoods.length === 0" description="暂无最新上架商品" />
      </div>

      <!-- 精品推荐 -->
      <div class="goodsBox">
        <p class="goodsBoxTitle">
          精品推荐
          <span @click="toGoodsList">更多<van-icon name="arrow"/></span>
        </p>
        <van-grid :column-num="3" clickable>
          <van-grid-item v-for="item in recommendGoods" :key="item.cp_id" @click="toGoodsDetails(item)">
            <van-image :src="item.cp_tupian" />
            <p class="goodsName name_3">{{ item.cp_mingcheng }}</p>
            <p class="goodsPrice price_3">￥{{ item.jiage }}</p>
          </van-grid-item>
        </van-grid>
        <!-- 空 提示 -->
        <van-empty v-if="recommendGoods.length === 0" description="暂无精品推荐商品" />
      </div>
      <van-divider>~ 我是有底线的 ~</van-divider>
    </div>
    <!-- 底部导航 -->
    <PageTabs :childActive="0"></PageTabs>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
import PageTabs from '@/components/PageTabs';
export default {
  name: "index",
  components: {
    PageTabs
  },
  data() {
    return {
      //轮播
      slideList: [
        {
          clickUrl: "#1",
          desc: "图片轮播说明1",
          image: require("../assets/ban1.jpg"),
        },
        {
          clickUrl: "#2",
          desc: "图片轮播说明2",
          image: require("../assets/ban2.jpg"),
        },
        {
          clickUrl: "#3",
          desc: "图片轮播说明3",
          image: require("../assets/ban3.jpg"),
        },
      ],
      // 宫格
      gridList: [
        {
          clickUrl: "goodsList",
          id: "",
          desc: "最新产品",
          image: require("../assets/menu01.png"),
        },
        {
          clickUrl: "news",
          id: "11",
          desc: "活动列表",
          image: require("../assets/menu02.png"),
        },
        {
          clickUrl: "news",
          id: "10",
          desc: "帮助中心",
          image: require("../assets/menu03.png"),
        },
        {
          clickUrl: "vip",
          desc: "用户中心",
          image: require("../assets/menu04.png"),
        },
      ],
      newsList: {}, //新闻列表
      newGoods: [], //最新上架
      recommendGoods: [], //精品推荐
    };
  },
  mounted() {
    this.getNews();
    this.getNewGoods();
    this.getRecommendGoods();
  },
  methods: {
    // 轮播图的跳转
    toImgUrl(url) {
      console.log("url", url);
    },
    // 获取news
    getNews() {
      SERVE.getNews({
        params: {
          cs_shuliang: 1, //数量
          cs_lxid: 11, //类型id
        },
      })
        .then((res) => {
          this.newsList = res.data[0];
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 获取最新上架
    getNewGoods() {
      SERVE.getNewGoods()
        .then((res) => {
          this.newGoods = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 获取精品推荐
    getRecommendGoods() {
      SERVE.getRecommendGoods()
        .then((res) => {
          this.recommendGoods = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    toNews() {
      this.$router.push({path: '/news', query: {id: '11'}});
    },
    toGoodsList(){
      this.$router.push("/goodsList");
    },
    toGoodsDetails(item){
      this.$router.push({path: '/goodsDetails', query: {id: item.cp_id}});
    },
    toPage(item){
      console.log('223232',item);
      this.$router.push({path: `/${item.clickUrl}`, query: {id: item.id}});
    }
  },
};
</script>

<style lang="scss" scoped>
.index {
  .goodsBox {
    padding: 0 15px;
    box-sizing: border-box;
    .goodsBoxTitle {
      height: 20px;
      line-height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
      padding-left: 6px;
      border-left: 3px solid green;
      & > span {
        font-size: 14px;
        display: flex;
        align-items: center;
      }
    }
    img {
      width: 90%;
    }
    .goodsName {
      font-size: 14px;
      text-align: left;
      width: calc(50vw - 35px);
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
    .goodsPrice {
      width: calc(50vw - 35px);
      font-size: 14px;
      text-align: left;
      color: #ff4500;
    }
    .name_3,
    .price_3 {
      width: calc(33vw - 36px);
    }
  }
}
</style>
